<script>
    import dispatch from "../../Entiys/Character/impl/dispatch.js";

    let character_dispatch = dispatch;
    let init_character = character_dispatch.config.init_character;
    export let selected_index = 0
    let selected = Array.from({ length: init_character.length }, () => false);
    selected[selected_index] =true

</script>

<main id="select-character">
    {#each init_character as chara,index}
        <img src="{character_dispatch[chara].images.card}" class="image {selected[index] ?'selected' : ''}" on:click={()=>{
             selected = Array.from({ length: init_character.length }, () => false);
             selected[index] = true
             selected_index = index
        }}>
    {/each}
</main>

<style lang="less">
  #select-character{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #FFD700;
    transition: 300ms;
    position: relative;
    top: 0;

    &:hover {
      top: -10px;
    }
  }

  .selected {
    border-color: #ffd700;
    box-shadow: 0 0 10px #ffd700;
  }
</style>